<script lang="ts" setup>
import aj from './aj/index.vue'
import ysp from './ysp/index.vue'
import ajwsgl from './ajwjgl/index.vue'
import yspwjgl from './yspwjgl/index.vue'
import ajxx from './aj/components/ajxx.vue'
import mlxx from './aj/components/mlxx.vue'
import ryxx from './aj/components/ryxx.vue'
import yspxx from './ysp/components/yspxx.vue'
import wsjzglService from '@/api/wsjzgl'
import yspglService from '@/api/yspgl'
import { ref, onMounted, nextTick } from 'vue'
import { useMainStore } from '@/store/main'
import { ElMessage } from 'element-plus'
import { getFldmList } from '@/utils/get-fldm'
// 获取ref
const ajwsglRef = ref()
const ajAjxxRef = ref()
const ajRyxxRef = ref()
const ajMlxxRef = ref()
const yspxxRef = ref()
const ajRef = ref()
const yspRef = ref()
const yspwjglRef = ref()

const store = useMainStore()

getFldmList()
// 生命周期
onMounted(() => {
  handleClick('aj')
})

const activeName = ref('aj')

const handleClick = (tab: any) => {
  activeName.value = tab
  switch (tab) {
    case 'aj':
      ajRef.value?.init()
      break
    case 'yx':
      yspRef.value?.init()
      break
    default:
      break
  }
}
const rightTabActiveName = ref('ajxx')
// 案卷传递过来方法
const nodeClick = (data: any, mlList?: any[]) => {
  store.saveNodeTreeData(data)
  if (data.cj === '1') {
    rightTabActiveName.value = 'ajxx'
    rightTabChangeTabs('ajxx')
    mlList && getWjList(mlList)
  } else if (data.cj === '2') {
    rightTabActiveName.value = 'mlxx'
    rightTabChangeTabs('mlxx')
    mlList && getWjList(mlList)
  } else {
    ajwsglRef.value.getWjxqxx([])
  }
}

// 更新当前预览的文书页码
const updatePage = (wjbh: string) => {
  const i = wjList.value.findIndex((wj) => wj.wjbh === wjbh)
  ajwsglRef.value.indexChange(i)
}

// 音视频图片传递过来方法
const yspNodeClick = (data: any) => {
  store.saveNodeTreeData(data)
  if (data.cj === 1 || !data.cj) {
    yspwjglRef.value.getWjxqxx([])
    yspxxRef.value.getWjxqxx([])
    return
  }
  // 判断
  if (data.fbh === 'gd0020002' || data.fbh === 'gd0020001') {
    getYspList()
  } else {
    getPhotoList()
  }
}

const rightTabChangeTabs = (tab: string) => {
  switch (tab) {
    case 'ajxx':
      ajAjxxRef.value?.init()
      break
    case 'ryxx':
      ajRyxxRef.value?.init()
      break
    case 'mlxx':
      ajMlxxRef.value?.init()
      break
    default:
      break
  }
}

// 案卷复卷列表
const wjList = ref<any[]>([])
const getWjList = (mlList: any[]) => {
  // 以一个卷为单位连续查看
  const params = {
    ajbh: store.$state.nodeTreeData?.ajbh,
  }
  wsjzglService
    .queryWjList(params)
    .then((res) => {
      nextTick(() => {
        const wjListArr: any[] = []
        // 按目录顺序给文件排序
        mlList?.forEach((ml) => {
          res.data.forEach((wj) => {
            if (wj.mlbh === ml.bh) {
              wjListArr.push(wj)
            }
          })
        })
        wjList.value = wjListArr
        ajwsglRef.value.getWjxqxx(wjListArr)
        const i = mlList.findIndex((ml) => ml.bh === store.$state.nodeTreeData?.bh)
        if (i === 1) {
          ajwsglRef.value.indexChange(mlList[0].wjsl)
        } else if (i > 1) {
          ajwsglRef.value.indexChange(
            mlList.slice(0, i).reduce((pre, next) => {
              return pre + next.wjsl
            }, 0),
          )
        }
      })
    })
    .catch((err) => {
      !err.isError && ElMessage({ type: 'warning', message: err.message })
    })
}

// 音视频目录列表
const getYspList = () => {
  const params = {
    dabh: store.$state.nodeTreeData?.dabh,
    mlbh: store.$state.nodeTreeData?.bh,
  }
  yspglService
    .getYspmlxx(params)
    .then((res) => {
      nextTick(() => {
        yspwjglRef.value.getWjxqxx(res.data)
        yspxxRef.value.getWjxqxx(res.data)
      })
    })
    .catch((err) => {
      !err.isError && ElMessage({ type: 'warning', message: err.message })
    })
}

// 获取图片目录列表
const getPhotoList = () => {
  const params = {
    dabh: store.$state.nodeTreeData?.dabh,
    mlbh: store.$state.nodeTreeData?.bh,
  }
  yspglService
    .getZpmlxx(params)
    .then((res) => {
      nextTick(() => {
        yspwjglRef.value.getWjxqxx(res.data)
        yspxxRef.value.getWjxqxx(res.data)
      })
    })
    .catch((err) => {
      !err.isError && ElMessage({ type: 'warning', message: err.message })
    })
}
</script>
<template>
  <div class="content">
    <div class="left">
      <el-radio-group v-model="activeName" @change="handleClick">
        <el-radio-button label="案卷" value="aj" />
        <el-radio-button label="音像" value="yx" />
      </el-radio-group>
      <aj
        ref="ajRef"
        v-show="activeName === 'aj'"
        @nodeClick="nodeClick"
        @updatePage="updatePage"
      />
      <ysp ref="yspRef" v-show="activeName === 'yx'" @nodeClick="yspNodeClick" />
    </div>
    <div class="center">
      <ajwsgl ref="ajwsglRef" v-if="activeName === 'aj'" />
      <yspwjgl ref="yspwjglRef" v-if="activeName === 'yx'" />
    </div>
    <div class="right">
      <div class="right-content" v-if="activeName === 'aj'">
        <el-radio-group v-model="rightTabActiveName" @change="rightTabChangeTabs">
          <el-radio-button label="案卷信息" value="ajxx" />
          <el-radio-button label="人员信息" value="ryxx" />
          <el-radio-button label="目录信息" value="mlxx" />
        </el-radio-group>
        <ajxx ref="ajAjxxRef" v-show="rightTabActiveName === 'ajxx'"></ajxx>
        <ryxx ref="ajRyxxRef" v-show="rightTabActiveName === 'ryxx'"></ryxx>
        <mlxx ref="ajMlxxRef" v-show="rightTabActiveName === 'mlxx'"></mlxx>
      </div>
      <div class="right-content" v-if="activeName === 'yx'">
        <el-radio-group model-value="yxxx">
          <el-radio-button label="音像信息" value="yxxx" />
        </el-radio-group>
        <yspxx ref="yspxxRef"></yspxx>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  .el-radio-group {
    margin-bottom: 10px;
  }
  .left {
    padding: 10px;
    width: 360px;
    min-width: 360px;
    height: 100%;
    border: 1px solid #b3c8d4;
    position: relative;
    margin-right: 10px;
  }

  .center {
    border: 1px solid #b3c8d4;
    flex: 1;
    flex-shrink: 0;
    width: calc(100% - 730px);
  }

  .right {
    width: 350px;
    min-width: 350px;
    height: 100%;
    padding: 10px;
    border: 1px solid #b3c8d4;
    position: relative;
    margin-left: 10px;
    .right-content {
      height: 100%;
      width: 100%;
    }
  }

  .el-radio-group {
    :deep(.el-radio-button) {
      &.is-active {
        .el-radio-button__inner {
          background: #78a1cb;
          border-color: #78a1cb;
          color: #fff;
        }
      }
    }
    :deep(.el-radio-button__inner) {
      background: #ebf4fe;
      color: #5c79b0;
    }
  }

  @media screen and (max-width: 380px) {
    .left {
      margin-right: 0;
    }
    .center,
    .right {
      display: none;
    }
  }
}
</style>
